<template>
	<view class="page">
		<view class="summary">为你找到以下志愿者（按距离排序，演示数据）</view>
		<view class="item" v-for="v in list" :key="v.name">
			<view class="row1">
				<text class="name">{{v.name}}</text>
				<text class="dist">{{v.distance}}km</text>
			</view>
			<view class="row2">{{v.school}} ｜ 擅长：{{v.tags.join('、')}}</view>
			<view class="task">
				<view class="t-title">任务清单</view>
				<view class="step" v-for="(s,i) in v.task" :key="i">{{i+1}}. {{s}}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return{list:[
			{name:'张同学',distance:1.2,school:'XX大学',tags:['教微信使用','生活缴费'],task:['打开微信','进入生活缴费','选择电费','输入户号','确认支付']},
			{name:'李同学',distance:2.5,school:'YY学院',tags:['陪同就医'],task:['准备证件','挂号分诊','就诊缴费','取药说明']}
		]}
	}
}
</script>

<style scoped>
.page{min-height:100vh;background:#fff;padding:24rpx}
.summary{color:#666;margin-bottom:12rpx}
.item{background:#f7f7f7;border-radius:12rpx;padding:16rpx;margin-bottom:12rpx}
.row1{display:flex;justify-content:space-between;align-items:center}
.name{font-size:32rpx;color:#333}
.dist{color:#1677ff}
.row2{margin-top:6rpx;color:#666}
.task{margin-top:10rpx;background:#fff;border-radius:8rpx;padding:12rpx}
.t-title{font-weight:600;margin-bottom:6rpx}
.step{color:#333;line-height:1.6}
</style>

